<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: zhayang 1063975710@qq.com
 * @LastEditTime: 2024-07-06 20:35:14
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container fit bg-#fff column relative">
    <div class="model-list-header h-col-auto flex justify-between">
      <el-button
        type="primary"
        size="small"
        icon="el-icon-plus"
        :loading="loading"
        @click="turnTo"
      >
        新增模型
      </el-button>
      <div class="flex justify-end h-col">
        <div class="w-300">
          <el-input
            v-model="params.key"
            placeholder="请输入关键词"
            clearable
            size="small"
          >
            <i
              slot="suffix"
              class="el-icon-search el-input__icon"
            ></i>
          </el-input>
        </div>
        <div class="m-l-10">
          <el-button
            type="primary"
            size="small"
            :loading="loading"
            @click="getData"
          >
            查询
          </el-button>
        </div>
      </div>
    </div>
    <div class="model-list-body h-col m-t-14 flex flex-col flex-nowrap">
      <BaseTable
        :columns="column"
        :loading="loading"
        :table-data="tableData"
      >
        <template #machine_count="{ row }">
          <div
            v-if="row.machine_count"
            class="open flex cursor-pointer"
            @click="goto(row, '/model-info/infomercial')"
          >
            <img
              :src="require('@/assets/images/model/open.png')"
              class="w-24 h-24"
            />
            <div
              class="bg-#04d1b81A text-#04D1B8 center p-x-8 p-y-2 rd-4 m-l-4 text-12"
            >
              已开通
            </div>
          </div>
          <div
            v-else
            class="un-open flex cursor-pointer"
            @click="openAd(row)"
          >
            <img
              :src="require('@/assets/images/model/un-open.png')"
              class="w-24 h-24"
            />
            <div
              class="bg-#F4F5F9 text-#9E9E9E p-x-8 p-y-2 rd-4 m-l-4 center text-12"
            >
              未开通
            </div>
          </div>
        </template>
        <template #welcome="{ row }">
          <img
            :src="require('@/assets/images/model/video.png')"
            class="w-24 h-24 cursor-pointer"
            @click="showVideo(row, 'welcome')"
          />
        </template>
        <template #survival="{ row }">
          <img
            :src="require('@/assets/images/model/video.png')"
            class="w-24 h-24 cursor-pointer"
            @click="showVideo(row, 'survival')"
          />
        </template>
        <template #action="{ row }">
          <div class="flex">
            <el-button
              type="text"
              size="small"
              @click="goto(row, '/model-info/model-detail', 'first')"
            >
              问答
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="goto(row, '/model-info/model-detail', 'second')"
            >
              未匹配问题
            </el-button>
            <div class="m-l-16">
              <el-dropdown
                trigger="click"
                @command="handleCommand($event, row)"
              >
                <el-button
                  type="text"
                  size="small"
                >
                  更多
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
                  <el-dropdown-item command="share">分享</el-dropdown-item>
                  <el-dropdown-item command="delete">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </template>
      </BaseTable>
      <!-- <div class="col-auto m-y-15 p-l-4">
        <Pagination
          :pagination-data="pageData"
          @paginationFun="changePage"
        />
      </div> -->
    </div>
    <el-dialog
      title="广告机介绍"
      :visible.sync="dialogVisible"
      width="55%"
    >
      <!-- <span>
        当广告机未开通时，点击则弹出本页面。开通则直接进入广告机设备。
        本段内容根据设置显示图文详情或视频介绍。
      </span> -->
      <div class="full-w center ad-dialog-content">
        <img :src="require('@/assets/images/model/ad.png')" />
      </div>
    </el-dialog>
    <transition name="el-fade-in-linear">
      <div
        v-if="videoShow"
        class="model-mask z-9998 fit fixed left-0 top-0 bg-#00000080 overflow-hidden center"
        @click.stop="closeMask"
      >
        <div @click.stop>
          <video
            width="450"
            height="800"
            class="model-video z-9999"
            :src="videoUrl"
            controls
          ></video>
        </div>
      </div>
    </transition>
    <el-dialog
      title="分享"
      :visible.sync="shareVisible"
      width="55%"
    >
      <div class="full-w p-x-120">
        <div class="flex full-w">
          <div class="flex-1 column center">
            <div class="text-#1C1F23 font-600 text-16 line-hieght-19">
              H5二维码
            </div>
            <img
              id="code-pic"
              class="w-150 h-150 m-y-12"
              :src="require('@/assets/images/model/code.png')"
            />
            <el-button
              type="primary"
              size="small"
              @click="downCode"
            >
              下载二维码
            </el-button>
          </div>
          <div class="flex-1 column center">
            <div class="text-#1C1F23 font-600 text-16 line-hieght-19">
              H5二维码
            </div>
            <img
              class="w-150 h-150 m-y-12"
              :src="require('@/assets/images/model/code.png')"
            />
            <el-button
              type="primary"
              size="small"
              @click="downCode"
            >
              下载二维码
            </el-button>
          </div>
        </div>
        <div
          class="m-t-40 full-w border border-#E0E0E0 flex p-x-20 p-y-12 items-center"
        >
          <div class="col m-r-12">
            <div class="text-#1C1F23 font-600 text-16 line-hieght-19 m-b-10">
              H5二维码
            </div>
            <div class="text-#1C1F23 font-500 text-16 line-hieght-19 m-b-10">
              {{ shareUrl }}
            </div>
          </div>
          <div class="col-auto">
            <el-button
              type="primary"
              size="small"
              @click="copy"
            >
              复制
            </el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import BaseTable from '@/components/bmp/table/index.vue'
// import Pagination from '@/components/pagination/pagination'

import { Loading } from 'element-ui'
import { getList, modelDet, deleteModel } from '@/api/model'
export default {
  components: {
    BaseTable
    // Pagination
  },
  data() {
    return {
      params: {
        key: ''
      },
      column: [
        {
          prop: 'model_uniqueid',
          label: '模型ID'
        },
        {
          prop: 'title',
          label: '模型名称'
        },
        {
          prop: 'machine_count',
          label: '广告机'
        },
        {
          prop: 'welcome',
          label: '欢迎视频'
        },
        {
          prop: 'survival',
          label: '兜底视频'
        },
        {
          prop: 'collect_faq_count',
          label: '问题数'
        },
        {
          prop: 'collect_question_count',
          label: '访问数'
        },
        {
          prop: 'collect_question_unmatch_count',
          label: '未匹配问题数'
        },
        {
          prop: 'action',
          label: '操作'
        }
      ],
      tableData: [],
      loading: false,
      dialogVisible: false,
      shareVisible: false,
      videoUrl: '',
      videoShow: false,
      shareUrl: 'contact.efenshen.com/?model=11aa5fbf2dd170d4132f4956ff9decce'
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      const param = this.params.key ? { key: this.params.key } : {}
      getList({ ...param, knowledge_switch: 0 })
        .then((res) => {
          if (res && res.code === 0) {
            this.tableData = res.data
          }
        })
        .catch(() => {
          this.$message.error('获取错误，请重试')
        })
        .finally(() => {
          this.loading = false
        })
    },
    showVideo(row, type) {
      if (row.model_uniqueid) {
        const loadingInstance = Loading.service()
        modelDet({ model_uniqueid: row.model_uniqueid })
          .then((res) => {
            if (res && res.code === 0) {
              if (res?.data?.media) {
                this.videoUrl =
                  type === 'welcome'
                    ? process.env.VUE_APP_FILE_text_API +
                      res?.data?.media?.welcome_video_info?.oss_url
                    : process.env.VUE_APP_FILE_text_API +
                      res?.data?.media?.survival_reply_video_info?.oss_url
                if (this.videoUrl) {
                  this.videoShow = true
                  return
                }
              }
              this.$message.warning(
                `暂无${type === 'welcome' ? '欢迎' : '兜底'}视频`
              )
              // this.videoShow = true
            }
          })
          .catch(() => {
            this.$message.error('获取错误，请重试')
          })
          .finally(() => {
            this.$nextTick(() => {
              loadingInstance.close()
            })
          })
      }
    },
    closeMask() {
      this.videoShow = false
    },
    handleCommand(command, row) {
      if (command === 'delete') {
        const loadingInstance = Loading.service({
          text: '正在删除中...'
        })
        deleteModel({
          model_uniqueid: row.model_uniqueid
        })
          .then((res) => {
            if (res && res.code === 0) {
              this.$message.success('删除成功')
              this.getData()
            }
          })
          .catch(() => {
            this.$message.error('删除失败，请重试')
          })
          .finally(() => {
            this.$nextTick(() => {
              loadingInstance.close()
            })
          })
      } else if (command === 'edit') {
        this.$router.push({
          path: 'edit-model',
          query: { uid: row.model_uniqueid }
        })
      } else {
        this.shareVisible = true
      }
    },
    // 跳转进入广告机位, 详情
    goto(row, path, type) {
      this.$router.push({
        path: path,
        query: { uid: row.model_uniqueid, type: type }
      })
    },
    // 打开未开通的广告机展示弹窗
    openAd(e) {
      this.dialogVisible = true
    },
    turnTo() {
      this.$router.push({ path: 'add-model' })
    },
    copy() {
      try {
        const textarea = document.createElement('textarea')
        textarea.value = this.shareUrl
        document.body.appendChild(textarea)
        textarea.select()
        document.execCommand('copy')
        document.body.removeChild(textarea)
        this.$message.success('已成功复制到剪贴板')
      } catch (e) {
        this.$message.error('复制失败')
      }
    },
    downCode() {
      var img = document.getElementById('code-pic')

      // 创建一个a标签
      var link = document.createElement('a')
      link.href = img.src
      link.download = 'qr-code.png' // 设置下载的文件名

      // 将a标签添加到页面中
      document.body.appendChild(link)

      // 模拟点击下载链接
      link.click()

      // 清理工作，将a标签从页面中移除
      document.body.removeChild(link)
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-item {
  cursor: pointer;
  &:hover {
    background: #f4f5f9;
    border-radius: 4px 4px 4px 4px;
  }
}
.model-video {
  object-fit: cover;
}
.adjust-height {
  width: 100%;
  min-height: 24px;
  max-height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: pre-wrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
}
.ad-dialog-content {
  max-height: calc(70vh - 60px - 54px);
  overflow: hidden;
  img {
    width: auto;
    height: auto;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
  }
}
</style>
